<!-- 
  @name: 我的账户详情
  @date: 2020.8.11
 -->
<template>
	<view>
		<view class="header ">
			<view class="u-f-ac">
				<view class="search-box u-f-ac">
					<input
						type="text"
						value=""
						v-model="keyword"
						placeholder="输入卡号或备注"
						confirm-type="search"
						@confirm="search"
					/>
					<image class="icon-search" src="../static/my/search@2x.png" mode="widthFix" @tap="search"></image>
				</view>
				<view>状态</view>
				<view
					class="status u-f-jsb"
					:style="{ overflow: showDrop ? 'unset' : 'hidden' }"
					@tap="showDrop = !showDrop"
				>
					<view>{{ statusList[statusIndex] }}</view>
					<image
						class="arrow-down"
						:class="{ active: showDrop }"
						src="../static/my/arrow-down.png"
						mode="aspectFill"
					></image>
					<view class="mask"></view>
					<!-- 状态选择下拉框 -->
					<view class="select-dorp" :class="{ active: showDrop }">
						<block v-for="(item, index) in statusList" :key="item">
							<view class="item u-f-ajc" hover-class="gray" @tap="chooseType(index)">
								{{ item }}
							</view>
						</block>
					</view>
				</view>
			</view>
			<view class="add-fillcard u-f-ajc" @tap="jumpPage">
				<image src="../static/wxImage/icon-fillcard.png" mode="aspectFill"></image>
				<view>绑定加注卡</view>
			</view>
		</view>
		<view></view>
		<view class="body">
			<!-- 储值卡区域 -->
			<view class="cardview">
				<view
					class="card bg-1"
					v-for="(item, index) in cardList"
					:key="item.cardId"
					:class="item.bgClass"
				>
					<view :style="{ opacity: item.cardStatus !== 1 ? '0.5' : '' }">
						<view class="top">
							<view>NO:{{ item.cardNo }}</view>
							<view>{{ item.operName }}</view>
						</view>
						<view
							class="dots"
							@tap="
								selItem = item;
								openDialogMenu();
							"
						>
							<text></text>
							<text></text>
							<text></text>
						</view>
						<view class="bottom-infos">
							<view class="info" v-if="item.cardType == 1">
								<view>余额</view>
								<view>
									<text>¥</text>
									<u-count-to
										v-if="item.startVal || item.startVal === 0"
										:decimals="2"
										:start-val="item.startVal"
										:end-val="item.cardMoney"
										:autoplay="item.autoplay"
										color="#fff"
										font-size="40"
									></u-count-to>
									<text v-else class="lg">{{ item.cardMoney || '0.00' }}</text>
								</view>
							</view>
							<view class="info">
								<view>备注</view>
								<view>
									<text class="lg">{{ item.cardDesc || '--' }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="icon-stop" v-if="item.cardStatus === 2"></view>
					<view class="icon-loca" v-if="item.cardStatus === 3"></view>
				</view>
				<!-- 底部加载提示 -->
				<btm-load></btm-load>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cardStatus: '', // 1-启用，2-停用，3锁定
			keyword: '',
			cardList: [],
			statusList: ['全部', '启用', '停用', '锁定'],
			page: 1,
			statusIndex: 0,
			showDrop: false,
			selItem: {} // 选择的加注卡
		};
	},
	watch: {
		statusIndex(newVal) {
			if (newVal == 0) {
				this.cardStatus = '';
			} else {
				this.cardStatus = newVal;
			}

			this.search();
		}
	},
	onLoad() {
		this.page == 1;
		this.getCardList();
		uni.$on('userAcc_regpay', this.regpay);
		uni.$on('userAcc_cardAdd', this.cardAdd);
		uni.$on('userAcc_cardChe', this.cardChe);
		uni.$on('userAcc_cardRemove', this.remove);
	},
	onPullDownRefresh() {
		this.page = 1;
		this.cardList.length = 0;
		this.getCardList();
	},
	onReachBottom() {
		this.page++;
		this.getCardList();
	},
	onUnload() {
		uni.$off('userAcc_regpay', this.regpay);
		uni.$off('userAcc_cardAdd', this.cardAdd);
		uni.$off('userAcc_cardChe', this.cardChe);
		uni.$off('userAcc_cardRemove', this.remove);
	},
	methods: {
		openDialogMenu() {
			let itemList;
			let fnArr;
			if (this.selItem.cardType === 1) {
				itemList = ['余额分配', '余额流水', '清空删除', '设置'];
				fnArr = [
					this.gotoCharge,
					this.gotoFlowWater,
					this.clearBalance,
					this.goCardMeg
				];
			} else {
				itemList = ['设置'];
				fnArr = [this.goCardMeg];
			}

			uni.showActionSheet({
				itemList,
				success: res => {
					console.log(res);
					
					fnArr[res.tapIndex]();
				}
			});
		},
		getCardList() {
			this.$http({
				url: this.$api.userUrl + 'getfillusercardpagebyuser',
				data: {
					cardStatus: this.cardStatus,
					keyword: this.keyword,
					page: this.page,
					rows: this.$tmp.ROWS_RET
				}
			}).then(res => {
				let arr = res;
				if (arr && arr.length > 0) {
					arr.forEach(item => {
						item.cardMoney = item.cardMoney && item.cardMoney.toFixed(2);
						switch (item.cardStatus) {
							case 1:
								item.bgClass = 'bg-1';
								break;
							case 2:
								item.bgClass = 'bg-2';
								break;
							case 3:
								item.bgClass = 'bg-3';
								break;
						}
					});
					this.cardList = this.cardList.concat(arr);
					this.cardPage += 1;
				}
			});
		},
		//搜索
		search() {
			this.page = 1;
			this.cardList = [];
			this.cardPage = 1;
			this.getCardList();
		},
		//监听充值
		regpay(e) {
			if (this.info.isFree !== 1) {
				let balance = this.$operation(this.info.userBalance, '+', e.total);
				let index = this.lists.findIndex(item => item.operaId === this.info.operaId);
				this.lists[index].userBalance = balance;
				this.info.userBalance = balance;
				this.$store.commit('setDtBalance', this.$operation(this.dtBalance, '+', e.total));
			}
		},
		//监听添加卡
		cardAdd(e) {
			uni.pageScrollTo({
				scrollTop: 0
			});
			this.keyword = '';
			this.page = 1;
			this.search();
		},
		//监听卡的信息变化
		cardChe(info) {
			let index = this.cardList.findIndex(item => item.cardId === info.cardId);
			let newCard = { ...this.cardList[index], ...info, autoplay: true }; // autoplay 是数字滚动开关；
			this.cardList.splice(index, 1, newCard);
		},
		remove(info) {
			let index = this.cardList.findIndex(item => item.cardId === info.cardId);
			this.$delete(this.cardList, index);
		},
		// 选择状态
		chooseType(index) {
			this.statusIndex = index;
		},
		switchShow() {
			this.showDrop = !this.showDrop;
		},
		//前往管理卡
		goCardMeg() {
			this.$store.commit('setTmpData', JSON.stringify(this.selItem));
			let url = './cardMeg?operaId=' + this.selItem.operaId;
			this.$navigateTo(url);
		},
		// 卡添加
		jumpPage() {
			uni.navigateTo({
				url: '/pagesUc/user-account/cardAdd'
			});
		},
		gotoFlowWater() {
			uni.navigateTo({
				url: '/pagesUc/user-account/cardFlowWater?id=' + this.selItem.cardId
			});
		},
		gotoCharge() {
			uni.navigateTo({
				url:
					'/pagesUc/user-account/balanceAllocate?card=' +
					encodeURIComponent(JSON.stringify(this.selItem)),
				fail: e => {
					console.log(e);
				}
			});
		},
		clearBalance() {
			uni.showModal({
				title: '提示',
				content: `此卡上的余额清空后将退还到原账户，您确定清空余额并删除此卡吗！`,
				confirmText: '清空删除',
				confirmColor: '#ffaa00',
				success: async res => {
					if (res.confirm) {
						if (this.selItem.cardMoney) {
							// 有余额就清空删除
							await this.$http({
								url: this.$api.recordUrl + 'distributecardmoney',
								data: {
									action: 0,
									cardId: this.selItem.cardId
								}
							});
						} else {
							// 余额为0 就直接删卡
							await this.$http({
								url: this.$api.recordUrl + 'editcardinfo',
								data: {
									action: 2,
									cardId: this.selItem.cardId
								}
							});
						}
						let idx = this.cardList.findIndex(
							item => item.cardId === this.selItem.cardId
						);
						this.cardList.splice(idx, 1);
						this.$successToast('清除成功！');
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.gray {
	background-color: #e6e6e6;
}
.header {
	position: fixed;
	top: 0;
	background-color: #ffffff;
	padding: 30rpx;
	width: 100%;
	z-index: 100000;

	.search-box {
		flex: 1;
		height: 88rpx;
		border-radius: 40rpx;
		background-color: #f3f3f3;
		padding: 0 30rpx;
		margin-right: 20rpx;

		.icon-search {
			flex-shrink: 0;
			width: 30rpx;
			height: 30rpx;
		}
	}
	.status {
		width: 160rpx;
		height: 88rpx;
		background-color: #f3f3f3;
		border-radius: 40rpx;
		color: #666666;
		margin-left: 30rpx;
		padding: 0 30rpx;
		position: relative;

		.arrow-down {
			width: 23rpx;
			height: 12rpx;
			transition: all 0.3s;

			&.active {
				transform: rotateZ(180deg);
			}
		}

		.select-dorp {
			position: absolute;
			top: 100rpx;
			left: 0;
			width: 180rpx;
			height: 0;
			background-color: #ffffff;
			text-align: center;
			transition: all ease 0.6;
			display: flex;
			flex-direction: column;
			padding: 0 10rpx;
			transition: all 0.3s;
			opacity: 0;

			> view {
				flex: 1;
			}
			> view:not(:last-child) {
				border-bottom: 1rpx dotted #eee;
			}
			&.active {
				height: 360rpx;
				opacity: 1;
			}
		}
	}
}

// 添加储值卡
.add-fillcard {
	color: #0dc887;
	font-size: 28rpx;
	margin-top: 30rpx;
	padding: 20rpx 0;
	> image {
		width: 61rpx;
		height: 42rpx;
		flex-shrink: 0;
		margin-right: 30rpx;
	}
}
/* 储值卡区域 */
.cardview {
	width: 750rpx;
	height: auto;
	margin-top: 260rpx;
	padding-left: 20rpx;
	margin-bottom: 150rpx;

	.card {
		background-image: url(../static/my/card-normal.png);
	}

	.card.bg-2 {
		filter: grayscale(30%);
	}
	.card.bg-3 {
		filter: grayscale(70%);
	}
	.card {
		width: 708rpx;
		height: 322rpx;
		padding: 0 40rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 30rpx;
		position: relative;

		> view {
			height: 100%;
			padding: 20rpx 0;
		}
		.dots {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			padding: 10rpx;
			z-index: 999;

			text {
				display: inline-block;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #ffffff;
				z-index: 99999;
				margin: 0 2rpx;
			}
		}

		.mark {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			width: 125rpx;
			height: 125rpx;
			opacity: 1;
			z-index: 1000;
		}
		.top {
			width: 300rpx;
			font-size: 34rpx;
			font-family: $font-family-num;
			margin-top: 10rpx;
			view {
				color: $color-white;
			}
		}
		.middle {
			width: 100%;
			margin-top: 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			.mleft {
				flex: 1;
				color: $color-white;
				.tip {
					font-size: 20rpx;
				}
				.num {
					font-size: 55rpx;
					font-family: $font-family-num;
					margin-left: 30rpx;
				}
			}
		}

		.bottom-infos {
			position: absolute;
			bottom: 30rpx;
			display: flex;

			view {
				color: #ffffff;
			}
			.lg {
				font-size: 40rpx;
			}
			.info {
				min-width: 150rpx;
				margin-right: 40rpx;
			}
		}
		.bottom {
			font-size: 30rpx;
			color: $color-white;
			width: 500rpx;
		}
		.icon-stop,
		.icon-loca {
			position: absolute;
			bottom: 10rpx;
			right: 20rpx;
			width: 125rpx;
			height: 125rpx;
		}
		.icon-stop {
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16Cls6AB6CyAABHr9FIbkQ425.png');
		}
		.icon-loca {
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16CluyAB5ZYAABIk99U_hk518.png');
		}
	}
}

.footer {
	width: 100vw;
	height: 150rpx;
	position: fixed;
	bottom: 0;
	background-color: #ffffff;

	.add-btn {
		width: 340rpx;
		height: 70rpx;
		background-color: #ff9a00;
		border: 1px solid rgba(255, 154, 0, 1);
		border-radius: 30rpx;
		color: #ffffff;
	}
}

.type-popup {
	position: fixed;
	top: 100rpx;
	width: 100%;
	background: #ffffff;
	.item {
		padding: 10rpx;
		padding-left: 100rpx;
		border-bottom: 1rpx solid #e6e6e6;
	}
}

.pop-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 20rpx;

	> view:not(:last-child) {
		width: 100%;
		padding: 26rpx;
		margin: 0 40rpx;
		text-align: center;
		font-size: 32rpx;
		border-top: 1rpx solid #f2f2f2;

		&.active {
			background-color: #cccccc;
		}
	}
	> view:first-child {
		border-top: none;
	}
	> view:last-child {
		color: #999999;
		width: 100%;
		padding: 32rpx 0;
		border-top: 1rpx solid #dfdfdf;
		text-align: center;
		font-size: 32rpx;
	}
}
</style>
